<template>
	<view class="reportBody">
		<div>
			<navitop>
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outlot"></i>
				<span slot="center-slot"><h4>表单列表</h4></span>
				<i  slot="right-slot" class="iconfont icon-jiahao"  @click="Scan_login"></i>
			</navitop> 
		</div>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :style="'margin-top:' + nv_height">
			<view class="list" v-for="(item,index) in dataSorce" :key="index">
				<view class="ItemView"  @click="Eidt_data(item)">
					<view class="ItemName">表单名称: {{item.title}}</view>
					<view class="ItemName">表单活动:{{item.activityName}}</view>
					<!-- <view class="ItemName">创建人:{{item.createUserName}}</view> -->
					<view class="ItemName">创建时间:{{item.createDate}}</view>
				</view>
				<view class="Itemshare" @click="share_form(item)">
					分享
				</view>
			</view>
		</mescroll-body>
		
		<!-- 气泡弹窗 -->
		 <chunLei-popups v-model="value" :popData="data" @tapPopup="tapPopup" :x="345" :y="95" placement="top-end">
		 </chunLei-popups>
		 
		 
		 <!-- 分享弹窗 -->
		 <popus ref="partner_share">
		 	<div class="share_out">
		 		<div class="share_out_class">
		 			<div v-for="(item,index) in list_tal" @click="share_click(item)">
		 				<div v-if='item.inddex !== 2'>
		 					<div class="share_out_icon" >
		 						<i :class="['iconfont',item.icon]"></i>
		 					</div>
		 					<div class="share_out_txt">
		 						<text>{{item.name}}</text>
		 					</div>
		 				</div>
		 				<div v-else>
		 					<div class="share_out_icon" >
		 						<i :class="['iconfont',item.icon]"></i>
		 					</div>
		 					<div class="share_out_txt_ind">
		 						<text>{{item.name}}</text>
		 					</div>
		 				</div>
		 			</div>
		 		</div>
		 	</div>
		 </popus>
	</view>
</template>

<script>
	import navitop from '@/components/common/navi-top'
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups";
	import {getFromList} from '@/common/api/job/jobapi.js'
	export default {
		components:{
			navitop,
			chunLeiPopups,
			popus
		},
		mixins: [MescrollMixin],
		data() {
			return {
				tabs: [],
				data: [		// 气泡弹窗数据
					{title:'新增',code:'add',icon:'icon-tianjiaadd143'},
				],
				current: 0,	// 切换组件选中值
				scroll_one: false,  //设置tabs选项是否平铺 
				dataSorce: [],
				// 下拉刷新的配置
				downOption: {
					auto: false,
					beforeEndDelay: 300,
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						offset: 1000 // 滚动多少才显示to-top 
					}
				},
				nv_height: '',
				title: ''	,// 导航显示
				key:'',		// 分类key
				tab_key: 1,	// 切换key
				value:false,	// 气泡弹窗显示
				tab_nav: true,	// 头部菜单显示
				pages: 1,		// 默认分页
				list_tal: [
					{
						name: '分享给朋友',
						code: 'WXSceneSession',
						icon: 'icon-fenxiang2',
						inddex: 1
					},
					{
						name: '分享到朋友圈',
						code: 'WXSenceTimeline',
						icon: 'icon-pengyouquan',
						inddex: 2
					},
					{
						name: '收藏',
						code: 'WXSceneFavorite',
						icon: 'icon-shoucang',
						inddex: 3
					},
					{
						name: '链接',
						code: '',
						icon: 'icon-lianjie',
						inddex: 4
					}
					
				],
				u_data: '', 	// 获取选中数据
			}
		},
		onLoad() {
			
		},
		//方法主动触发下拉刷新动画且请求第一页数据
		// onShow() {
		// 	setTimeout(()=>{
		// 		this.mescroll.triggerDownScroll();
		// 	},500)
		// },
		mounted() {
			 this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			 //  获取列表
			 this.invi_list(this.tab_key,this.pages);
			 
			 
		},
		methods: {
			
			// 表单登录页面
			Scan_login(){
				uni.navigateTo({
					url: '/pages/common/index/subpage/activety/Invite/sonlogin'
				})
			},
			
			// 获取列表
			invi_list(){
				getFromList().then((rows) => {
					if(rows.code == 200){
						this.dataSorce = rows.data.records
					}
				})
			},
			outlot(){
				uni.navigateBack()
			},
			
			// 分享 
			share_form(val){
				this.u_data = val;
				this.$refs.partner_share.open('bottom');
			},
			
			// 分享
			share_click(val){
				let _this = this;
				uni.showLoading({
					title: '正在加载...'
				})
				if(val.inddex !== 4){
					this.$refs.partner_share.close();
					uni.hideLoading();
					uni.share({
						provider: "weixin",
						scene: val.code,
						type: 0,
						href: 'http://192.168.1.2:8087/activity?id=' + this.u_data.id,
						title: this.u_data.title, 
						summary: this.u_data.formName,
						imageUrl: this.u_data.logo,
						success: function (res) {
							console.log("success:" + JSON.stringify(res)); 
						},
						fail: function (err) { 
							console.log("fail:" + JSON.stringify(err));
						}
					}); 
				}else{
					uni.setClipboardData({
						data: this.shar_user.registerUrl, 
						complete() {
							uni.showToast({ 
								title: "已复制到剪贴板"
							})
						}
					})
				}
			},
			
			
			/*下拉刷新的回调*/
			downCallback(val) {
				console.log('下拉--------')
				this.office_list(this.tab_key,this.pages);
				// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 500)
			},

			// 上拉加载
			upCallback(page) {
				this.pages++;
				let sun = this.pages;
				// let obj = {
				// 	current: page.num, // 页码, 默认1
				// 	size: page.size, // 页长, 默认10条
				// };
				this.office_list(this.tab_key,sun);
				setTimeout(()=>{
					this.mescroll.endErr();
				},500)
			},
		}
	}
</script>

<style scoped lang="scss">
	.reportBody {
		width: 100%;
		height: 100vh;
		padding-top: 5rpx;
	}

	.list {
		padding: 10rpx 0 25rpx;
		// width: 720rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 10rpx 15rpx;
		background-color: white;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.ItemView {
		// width: 350rpx;
		// display: flex;
		// flex-direction: row;
		margin-left: 10rpx;
		align-items: center;
		margin-top: 15rpx;
		background-color: white;
		overflow: hidden;
		width: 80%;
	}

	.ItemName {
		font-size: 30rpx;
		padding: 5px 0 0 30rpx;
	}
	
	.Itemshare {
		text-align: center;
		padding: 10% 0 0 0;
	}
	
	.share_out {
		height: 550rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 20px 20px 0 0;
	}
	.share_out_class {
		padding: 30rpx 0 0 0 ;
		width: 95%;
		display: flex;
		justify-content: space-around;
		margin: auto;
		.share_out_icon {
			font-size: 50px;
			color: #217fd0;
			text-align: center;
		}
		.share_out_txt {
			font-size: 15px;
			color: #868282;
			width: 80px;
			text-align: center;
		}
		.share_out_txt_ind {
			font-size: 15px;
			color: #868282;
			width: 50px;
			text-align: center;
		}
	}

</style>
